<template>
	<view class="">
		<!-- <view class="exin" v-if="notFollow">
			<view class="logo">
				<image src="/static/images/logobo.png" mode=""></image>
			</view>
			<view class="text">
				关注公众号可及时获取订单状态和技师信息
			</view>
			<view class="button" @click="goFollow">
				立即关注
			</view>
			<view class="close" @click="closeFollow">
				<fui-icon name="close" size="32"></fui-icon>
			</view>
		</view> -->
		<view class="head" :class="[{'not_follow':notFollow}]">
			<view class="bg">
				<image src="/static/images/my/bg.png" mode=""></image>
			</view>
			<view class="pop">
				<view class="flex">
					<view class="left" @click="goLogin">
						<image :src="userInfo.avatar" mode=""></image>
						<view class="flex-column">
							<text>{{userInfo.nickname}}</text>
							<text>立即开启上门之旅</text>
						</view>
					</view>
					<image src="/static/images/my/set.png" mode="" @click="set"></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="balance">
				<view class="relative">
					<image src="/static/images/my/balanceBG.png" mode=""></image>
					<view class="hole"></view>
					<view class="account">
						<view class="left">
							<view class="">账户余额</view>
							<view class="numbox">{{userInfo.money}}</view>
						</view>
						<view class="right" @click="goBalance">
							立即充值
						</view>
					</view>
				</view>
			</view>
			<view class="bot">
				<view class="collection">
					<view class="text" v-if="!haveToken">
						***
					</view>
					<view v-else class="shoucang" @click="goCollection">
						<view class="title">
							我收藏过的
						</view>
						<text>已收藏 {{userInfo.collects}} 人</text>
					</view>
					<image src="/static/images/my/collection1.png" mode=""></image>
				</view>
				<view class="collection">
					<view class="text" v-if="!haveToken">
						***
					</view>
					<view class="shoucang" @click="goCoupon" v-else>
						<view class="title">
							我的优惠券
						</view>
						<text>{{userInfo.coupons}} 张优惠券</text>
					</view>
					<image src="/static/images/my/coupons.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="advertising" @click="goInvitation">
			<image src="/static/images/my/advertising.png" mode=""></image>
		</view> -->
		<view class="function">
			<view class="title">
				其他功能
			</view>
			<view class="functionList">
				<view class="list" v-for="(item,index) in list" :key="index" @click="JumpPage(item)">
					<image :src="item.img" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<!-- <fui-dialog :show="show" title="立即关注公众号" color="#26c876" :content="content" :buttons="buttons" maskClosable @click="confirm" @close="cancel"></fui-dialog> -->
		<fui-landscape :show="show" position="3"  @close="cancel">
			<view class="land_container">
				<image class="fui-hd__img"  :src="$store.state.config.contact_qrcode" mode=""></image>
				<view class="down_file" @click.stop="confirm">
					保存到手机
					<image src="/static/images/down_file.png" mode=""></image>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
	import fuiLandscape from "@/components/firstui/fui-landscape/fui-landscape.vue"
	export default {
		components: {
			fuiIcon,
			fuiLandscape,
		},
		data(){
			return{
				userInfo:{
					nickname:'授权登陆',
					avatar:"/static/images/logo.jpg"
				},
				list:[
					{
						img:'/static/images/my/icon1.png',
						text:'意见反馈',
						url:'/pages/my/opinion/opinion'
					},
					{
						img:'/static/images/my/kefu.png', 
						text:'联系客服',
						url:'',
						type:'kefu'
					},
					{
						img:'/static/images/my/icon2.png',
						text:'地址管理',
						url:'/pages/my/myAddress/myAddress'
					},
					{
						img:'/static/images/my/icon3.png',
						text:'技师招募',
						url:'/pages/my/recruit/recruit'
					},
					{
						img:'/static/images/my/city_recruit.png',
						text:'城市加盟',
						url:'/pages/my/recruit/city_recruit'
					},
					// {
					// 	img:'/static/images/my/icon4.png',
					// 	text:'投诉管理',
					// 	url:'/pages/my/complaints/complaints'
					// },
				],
				haveToken:false, //是否登录  false:未登录
				notFollow:false,
				content: '可及时获取订单状态和技师信息',
				show: false,
				buttons:[
					{
						text: '不关注',
						color: '#ccc'
					},
					{
						text: '关注',
						color: '#26c876'
					},
				],
				serviceUrl:'',	//客服链接
			}
		},
		onShow() {
			this.getForce()
			let token = uni.getStorageSync('token')
			if(token){
				this.haveToken = true;
			}else{
				this.haveToken = false;
			}
			this.getUserInfo()
			// #ifdef H5
			setTimeout(()=>{
				// if(navigator.userAgent.toLowerCase().indexOf('micromessenger') != -1){
				// 	let notFollow = sessionStorage.getItem('not_follow');
				// 	let is_follow = sessionStorage.getItem('is_follow')
				// 	console.log(this.userInfo,'userInfo')
				// 	if(this.userInfo.subscribe == 0){
				// 		if(!notFollow){
				// 			this.notFollow = true;
				// 		}else{
				// 			this.notFollow = false;
				// 		}
				// 	}
				// }
				if(navigator.userAgent.toLowerCase().indexOf('micromessenger') != -1){
					this.notFollow = false;
				}else{
					this.notFollow = true;
				}
			},1000)
			// #endif
		},
		methods:{
			//强制登录配置
			getForce(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						console.log(result,'------------------------getForce')
						this.force_login = result.data.force_login
						this.phone_login = result.data.phone_login
						this.serviceUrl = result.data.service_url
						this.$store.state.config = result.data
					}
				})
			},
			//关闭顶部横栏
			closeFollow(){
				console.log('123')
				sessionStorage.setItem('not_follow',true)
				this.notFollow = false;
			},
			//关注
			goFollow(){
				window.location.href = "https://mp.weixin.qq.com/s?__biz=MzkxOTQyMzMyOQ==&mid=2247484139&idx=1&sn=954c991df9762d5775ae82a4883538d5&chksm=c1a312e5f6d49bf3e8c63cf1dbd5c26e569a05b821284a7be541d0b4aac0cee0011fa30cc8a7#rd"
			},
			//弹窗按钮
			confirm(e){
				uni.downloadFile({
					url:this.$store.state.config.contact_qrcode,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							success: (result) => {
								uni.showToast({
									title:'保存成功',
									icon:"none"
								})
							},
							fail: (err) => {
								uni.showToast({
									title:'保存失败',
									icon:"none"
								})
							},
							complete: (complete) => {
								this.show = false;
							}
						})
					}
				})
			},
			cancel(){
				this.show = false;
			},
			//邀请
			goInvitation(){
				console.log('123123123')
				uni.navigateTo({
					url:'/pages/my/invitation/invitation'
				}) 
			},
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:'/api/user/info',
					method:'get',
					data:{
						is_login:true,
					},
					success:result=>{
					console.log(result)
						if(result.code  == 200){
							this.userInfo = result.data.info
							uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
						}
					}
				})
			},
			//余额
			goBalance(){
				if(this.haveToken){
					uni.navigateTo({
						url:`/pages/my/balance/balance?yue=${this.userInfo.money}`
					})
				}else{
					uni.showToast({
						title:'未登录',
						icon:'none'
					})
					setTimeout(()=>{
						// #ifdef H5
						if(navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1){
							uni.reLaunch({
								url:'/pages/login/index'
							})
						}else{
							let url = ''
							if(this.phone_login){
								url = '/pages/login/login'
							}else{
								url = '/pages/login/index'
							}
							uni.reLaunch({
								url:url
							})
						}
						// #endif
						// #ifdef APP-PLUS
						uni.reLaunch({
							url:'/pages/login/login'
						})
						// #endif
					},1000)
					return false;
				}
			},
			//优惠券
			goCoupon(){
				// uni.navigateTo({
				// 	url:'/pages/technician/detail/detail?id=1048'
				// })
				uni.navigateTo({
					url:'/pages/my/coupon/coupon'
				})
			},
			//收藏
			goCollection(){
				uni.navigateTo({
					url:'/pages/my/collection/collection'
				})
			},
			//页面跳转
			JumpPage(data){
				if(this.haveToken){ 
					if(data.type == 'kefu'){
						let config = this.$store.state.config
						console.log(config,'123')
						console.log(config,'123')
						//  contact_type: 1=链接 2=电话 3=二维码
						if(config.contact_type == 1){		
							let url = config.contact_url
							if(url == ''){
								return false;
							}
							// #ifdef H5
							if (uni.getSystemInfoSync().platform =='android') { //android终端
								window.open(url);
							} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
								window.location.href = url;
							}
							// #endif
							// #ifdef APP-PLUS
							// plus.runtime.openURL(encodeURI(url), err => {
							// 	console.log(err)
							// })
							uni.makePhoneCall({
								phoneNumber:config.contact_phone
							})
							// #endif
						}else if(config.contact_type == 2){
							uni.makePhoneCall({
								phoneNumber:config.contact_phone
							})
						}else{
							this.show = true;
						}
						
					}else{
						uni.navigateTo({
							url:data.url+'?infoId='+data.infoId
						})
					}
				}else{
					uni.showToast({
						title:'未登录',
						icon:'none'
					})
					setTimeout(()=>{
						// #ifdef H5
						if(navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1){
							uni.reLaunch({
								url:'/pages/login/index'
							})
						}else{
							let url = ''
							if(this.phone_login){
								url = '/pages/login/login'
							}else{
								url = '/pages/login/index'
							}
							uni.reLaunch({
								url:url
							})
						}
						// #endif
						// #ifdef APP-PLUS
						uni.reLaunch({
							url:'/pages/login/login'
						})
						// #endif
					},1000)
					return false;
				}
			},
			//登录
			goLogin(){
				if(this.userInfo.nickname == "授权登陆"){
					// #ifdef H5
					if(navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1){
						uni.navigateTo({
							url:'/pages/login/index'
						})
					}else{
						let url = ''
						if(this.phone_login){
							url = '/pages/login/login'
						}else{
							url = '/pages/login/index'
						}
						uni.navigateTo({
							url:url
						})
					}
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url:'/pages/login/login'
					})
					// #endif
				}else{
					return false;
				}
			},
			set(){
				if(this.haveToken){
					uni.navigateTo({
						url:'/pages/my/member/member'
					})
				}else{
					uni.showToast({
						title:'未登录',
						icon:'none'
					})
					setTimeout(()=>{
						// #ifdef H5
						if(navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1){
							uni.reLaunch({
								url:'/pages/login/index'
							})
						}else{
							let url = ''
							if(this.phone_login){
								url = '/pages/login/login'
							}else{
								url = '/pages/login/index'
							}
							uni.reLaunch({
								url:url
							})
						}
						// #endif
						// #ifdef APP-PLUS
						uni.reLaunch({
							url:'/pages/login/login'
						})
						// #endif
					},1000)
					return false;
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.not_follow{
		margin-top: 50px;
	}
	.exin{
		width: 100%;
		// height: 50px;
		z-index: 999;
		padding: 10rpx;
		box-sizing: border-box;
		background: #fff;
		color: #666;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 23upx;
		>.logo{
			width: 62rpx;
			height: 62rpx;
			>image{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			flex: 1;
			padding-left: 10rpx;
		}
		.button{
			margin-right: 10rpx;
			background: #26c876;
			padding:1px 20rpx;
			border-radius: 40rpx;
			color: #fff;
			font-size: 22rpx;
		}
		.close{
			justify-content: flex-end;
		}
	}
	.head{
		.bg{
			position: relative;
			image{
				width: 100%;
				height: 233px;
			}
		}
		.pop{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 233px;
			.flex{
				width: 95%;
				margin: 40px auto 0 auto;
				display: flex;
				justify-content: space-between;
				.left{
					display: flex;
					flex-direction: row;
					align-content: center;
					align-items: center;
					image{
						width: 63px;
						height: 63px;
						border-radius: 50px;
						margin-right: 13px;
						margin-left: 16px;
					}
					.flex-column{
						text{
							display: block;
							font-size: 16px;
							color: rgb(255, 255, 255);
							font-weight: 600;
							&:last-child{
								font-size: 11px;
								margin-top: 3px;
							}
						}
					}
				}
				>image{
					width: 26px;
					height: 26px;
					margin-right: 10px;
				}
			}
		}
	}
	.content{
		margin: -56px 0px 0px;
		background: rgb(255, 255, 255);
		border-radius: 20px;
		position: relative;
		z-index: 2;
		padding: 0px 11px 13px;
		box-sizing: border-box;
		.balance{
			display: flex;
			justify-content: center;
			-webkit-justify-content: center;
			align-items: center;
			-webkit-align-items: center;
			.relative{
				margin-top: -41px;
				position: relative;
				width: 90%;
				height: 71px;
				box-sizing: border-box;
				>image{
					width: 97%;
					height: 71px;
					position: absolute;
					top: 0px;
					left: 5px;
					z-index: 2;
					max-width: 100%;
					display: inline-block;
				}
				.hole{
					width: 100%;
					height: 8px;
					background: rgb(75, 85, 83);
					border-radius: 25px 25px 0px 0px;
					position: absolute;
					bottom: 0px;
					left: 0px;
					z-index: 1;
				}
				.account{
					position: relative;
					z-index: 3;
					padding: 0px 24px;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-content: center;
					align-items: center;
					.left{
						view{
							font-size: 13px;
							color: rgb(255, 255, 255);
							line-height: 1.8;
						}
						.numbox{
							font-size: 26px;
							line-height: 35px;
						}
					}
					.right{
						font-size: 12px;
						font-weight: 600;
						color: #26c876;
						width: 111px;
						height: 31px;
						background: linear-gradient(90deg,#fff,#e4fefd);
						border-radius: 50px;
						text-align: center;
						display: flex;
						justify-content: center;
						-webkit-justify-content: center;
						align-items: center;
						-webkit-align-items: center;
					}
				}
			}
		}
		.bot{
			margin-top: 19px;
			display: flex;
			justify-content: space-between;
			.collection{
				width: 40%;
				height: 73px;
				border-radius: 15px;
				padding: 0px 16px;
				position: relative;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				-webkit-flex-direction: column;
				justify-content: center;
				-webkit-justify-content: center;
				.text{
					font-size: 26px;
					color: rgb(0, 0, 0);
					line-height: 23px;
				}
				image{
					position: absolute;
					right: 0px;
					bottom: 0px;
					width: 100%;
					height: 100%;
					z-index: -1;
				}
				.shoucang{
					.title{
						font-size: 16px;
						font-weight: bold;
					}
					text{
						font-size: 12px;
						color: #666;
					}
				}
			}
		}
	}
	.advertising{
		height: 85px;
		margin: 19px 11px 0px;
		border-radius: 20px;
		image{
			width: 100%;
			border-radius: 20px;
			height: 100%;
		}
	}
	.function{
		margin: 19px 11px 0px;
		background: rgb(255, 255, 255);
		border-radius: 20px;
		position: relative;
		z-index: 2;
		padding-bottom: 13px;
		padding: 13px 16px;
		.title{
			font-size: 15px;
			color: rgb(51, 51, 51);
			font-weight: 600;
		}
		.functionList{
			display: flex;
			flex-wrap: wrap;
			.list{
				width: 25%;
				display: flex;
				margin-top: 20px;
				flex-direction: column;
				-webkit-flex-direction: column;
				justify-content: center;
				-webkit-justify-content: center;
				align-items: center;
				-webkit-align-items: center;
				text{
					display: block;
					font-size: 12px;
					color: rgb(51, 51, 51);
					margin-top: 9px;
				}
				image{
					width: 32px;
					height: 32px;
				}
			}
		}
	}
	/deep/.fui-fab__btn-main{
		background:transparent !important;
		// background-size: 100% !important;
	}
	/deep/.fui-dialog__inner{
		width: 520upx;
	}
	/deep/.fui-dialog__title{
		// display: none;
	}
	/deep/.fui-dialog__btn{
		font-size: 32upx !important;
	}
	/deep/.fui-dialog__btn-first{
		font-weight: normal;
	}
	/deep/.fui-dialog__body{
		// padding-top: 70upx;
	}
	.land_container{
		background-color: #fff;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 30upx;
		>.fui-hd__img{
			width: 520upx;
			height: 520upx;
		}
		.down_file{
			margin-top: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			>image{
				width: 40upx;
				height: 40upx;
				margin-left: 10upx;
			}
		}
	}
</style>